<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<style>
#sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}
#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
	-moz-animation:staff 3s linear;
	-webkit-animation:staff 3s linear;
	-o-animation:staff 3s linear;
	-ms-animation:staff 3s linear;
	animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20;
	-moz-animation:ball 3s linear;
	-webkit-animation:ball 3s linear;
	-o-animation:ball 3s linear;
	-ms-animation:ball 3s linear;
	animation:ball 3s linear;
}
@-moz-keyframes ball{
	0%{-moz-transform:translate(0,0);}
	5%{-moz-transform:translate(-90px,-100px);}
	18%{-moz-transform:translate(0,-350px);}
	35%{-moz-transform:translate(200px,0);}
	46%{-moz-transform:translate(380px,-160px);}
	60%{-moz-transform:translate(250px,-350px);}
	78%{-moz-transform:translate(60px,0);}
	100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes ball{
	0%{-webkit-transform:translate(0,0);}
	5%{-webkit-transform:translate(-90px,-100px);}
	18%{-webkit-transform:translate(0,-350px);}
	35%{-webkit-transform:translate(200px,0);}
	46%{-webkit-transform:translate(380px,-160px);}
	60%{-webkit-transform:translate(250px,-350px);}
	78%{-webkit-transform:translate(60px,0);}
	100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes ball{
	0%{-o-transform:translate(0,0);}
	5%{-o-transform:translate(-90px,-100px);}
	18%{-o-transform:translate(0,-350px);}
	35%{-o-transform:translate(200px,0);}
	46%{-o-transform:translate(380px,-160px);}
	60%{-o-transform:translate(250px,-350px);}
	78%{-o-transform:translate(60px,0);}
	100%{-o-transform:translate(0,0);}
}
@-ms-keyframes ball{
	0%{-ms-transform:translate(0,0);}
	5%{-ms-transform:translate(-90px,-100px);}
	18%{-ms-transform:translate(0,-350px);}
	35%{-ms-transform:translate(200px,0);}
	46%{-ms-transform:translate(380px,-160px);}
	60%{-ms-transform:translate(250px,-350px);}
	78%{-ms-transform:translate(60px,0);}
	100%{-ms-transform:translate(0,0);}
}
@keyframes ball{
	0%{transform:translate(0,0);}
	5%{transform:translate(-90px,-100px);}
	18%{transform:translate(0,-350px);}
	35%{transform:translate(200px,0);}
	46%{transform:translate(380px,-160px);}
	60%{transform:translate(250px,-350px);}
	78%{transform:translate(60px,0);}
	100%{transform:translate(0,0);}
}
@-moz-keyframes staff{
	0%{-moz-transform:translate(0,0);}
	6%{-moz-transform:translate(260px,0);}
	20%{-moz-transform:translate(300px,0);}
	30%{-moz-transform:translate(300px,0);}
	40%{-moz-transform:translate(200px,0);}
	65%{-moz-transform:translate(40px,0);}
	79%{-moz-transform:translate(0,0);}
	100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes staff{
	0%{-webkit-transform:translate(0,0);}
	6%{-webkit-transform:translate(260px,0);}
	20%{-webkit-transform:translate(300px,0);}
	30%{-webkit-transform:translate(300px,0);}
	40%{-webkit-transform:translate(200px,0);}
	65%{-webkit-transform:translate(40px,0);}
	79%{-webkit-transform:translate(0,0);}
	100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes staff{
	0%{-o-transform:translate(0,0);}
	6%{-o-transform:translate(260px,0);}
	20%{-o-transform:translate(300px,0);}
	30%{-o-transform:translate(300px,0);}
	40%{-o-transform:translate(200px,0);}
	65%{-o-transform:translate(40px,0);}
	79%{-o-transform:translate(0,0);}
	100%{-o-transform:translate(0,0);}
}
@-ms-keyframes staff{
	0%{-ms-transform:translate(0,0);}
	6%{-ms-transform:translate(260px,0);}
	20%{-ms-transform:translate(300px,0);}
	30%{-ms-transform:translate(300px,0);}
	40%{-ms-transform:translate(200px,0);}
	65%{-ms-transform:translate(40px,0);}
	79%{-ms-transform:translate(0,0);}
	100%{-ms-transform:translate(0,0);}
}
@keyframes staff{
	0%{transform:translate(0,0);}
	6%{transform:translate(260px,0);}
	20%{transform:translate(300px,0);}
	30%{transform:translate(300px,0);}
	40%{transform:translate(200px,0);}
	65%{transform:translate(40px,0);}
	79%{transform:translate(0,0);}
	100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
	<span id="ball">弹球</span>
	<span id="staff">滑杆</span>
</div>

<a href="http://www.w3chtml.com/css3/rules/@keyframes.html">w3chtml keyframes</a>
</body>
</html>
			